<template>
  <div>
    <div class="nav">
      <p>按关注时间排序</p>
      <ul>
        <li @click="qub()">全部|</li>
        <li class="lia" @click="sing()">歌手|</li>
        <li class="lia" @click="user()">用户</li>
      </ul>
    </div>

    <router-view></router-view>
  </div>
</template>

<script>
export default {
  methods: {
    qub() {
      this.$router.push("/all");
    },
    sing() {
      this.$router.push("/sing");
    },
    user() {
      this.$router.push("/user");
    },
  },
};
</script>

<style scoped>
.nav {
  padding-left: 0.3rem;
  padding-right: 0.3rem;
  height: 0.95rem;
  display: flex;
  justify-content: space-between;
  margin-top: 0.5rem;
  font-weight: 550;
}
p {
  font-size: 0.25rem;
  color: #585858;
}
ul {
  display: flex;
  justify-content: space-between;
  width: 2.5rem;
  font-size: 0.25rem;
  color: #585858;
  text-align: center;
}
.lia {
  color: #acacac;
}
</style>